<template>
  <div>
    <h1>Parent</h1>
    <p>{{ msg }}</p>
    <child :msg="helloMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  components: { Child },
  props: {
    msg: String,
  },
  computed: {
    helloMsg() {
      return "hello " + this.msg;
    },
  },
  beforeCreate() {
    console.log("parent: beforeCreate.");
  },
  created() {
    console.log("parent: created.");
  },
  beforeMount() {
    console.log("parent: beforeMount.");
  },
  mounted() {
    console.log("parent: mounted.");
  },
  beforeUpdate() {
    console.log("parent: beforeUpdate.");
  },
  updated() {
    console.log("parent: updated.");
  },
  beforeUnmount() {
    console.log("parent: beforeDestroy.");
  },
  unmounted() {
    console.log("parent: destroyed.");
  },
};
</script>
